﻿@using YiSha.Util
@{
    Layout = "~/Views/Shared/_Index.cshtml";
}
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment HostingEnvironment
@section header {
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/lib/zTree/v3/js/ztree.min.js"))

    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/lib/jquery.layout/1.4.4/jquery.layout-latest.min.js"))
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工序管理</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f9fafb;
            color: #1f2937;
            line-height: 1.5;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .container {
            max-width: 100%;
            margin: 0;
            padding: 0 16px;
            width: 100%;
        }

        /* 顶部导航栏 */
        header {
            background-color: #1e40af;
            color: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            flex-shrink: 0;
        }

        .header-content {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding: 16px;
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .btn {
            padding: 8px 16px;
            border-radius: 4px;
            border: none;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: background-color 0.2s;
        }

        .btn-primary {
            background-color: white;
            color: #1e40af;
        }

        .btn-secondary {
            background-color: #3b82f6;
            color: white;
        }

        .btn-primary:hover {
            background-color: #f3f4f6;
        }

        .btn-secondary:hover {
            background-color: #2563eb;
        }

        /* 主要内容区域 */
        main {
            flex-grow: 1;
            padding: 16px;
            display: flex;
            height: calc(100vh - 64px);
        }

        .content-wrapper {
            display: flex;
            gap: 16px;
            width: 100%;
            height: 100%;
            overflow: auto;
        }

        /* 左侧树形结构区域 */
        .tree-section {
            flex: 3;
            display: flex;
            flex-direction: column;
            height: 100%;
            min-width: 300px;
            max-width: 400px;
        }

        .page-title {
            margin-bottom: 16px;
        }

            .page-title h2 {
                font-size: 1.5rem;
                font-weight: 600;
                color: #1f2937;
                margin-bottom: 4px;
            }

            .page-title p {
                color: #6b7280;
                font-size: 0.875rem;
            }

        /* 右侧详情区域 */
        .detail-section {
            flex: 5;
            display: flex;
            flex-direction: column;
            height: 100%;
            min-width: 400px;
        }

        .detail-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            padding: 24px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow: hidden;
        }

        .detail-header {
            margin-bottom: 24px;
            padding-bottom: 16px;
            border-bottom: 1px solid #e5e7eb;
        }

            .detail-header h3 {
                font-size: 1.5rem;
                font-weight: 600;
                color: #1f2937;
                margin-bottom: 4px;
            }

            .detail-header p {
                color: #6b7280;
            }

        .detail-content {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            padding-right: 8px;
        }

        .detail-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: #6b7280;
            text-align: center;
            padding: 24px;
        }

        .detail-empty-icon {
            font-size: 4rem;
            margin-bottom: 24px;
            color: #d1d5db;
        }

        .detail-form {
            display: none;
            flex-grow: 1;
            flex-direction: column;
        }

        .form-group {
            margin-bottom: 24px;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #1f2937;
            font-size: 1rem;
        }

        .form-value {
            padding: 14px;
            background-color: #f9fafb;
            border-radius: 6px;
            border: 1px solid #e5e7eb;
            color: #1f2937;
            min-height: 48px;
            font-size: 1rem;
            line-height: 1.5;
        }

        /* 卡片样式 */
        .card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            padding: 20px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow: hidden;
        }

        /* 搜索区域 */
        .search-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }

        .process-count {
            font-size: 0.875rem;
            color: #6b7280;
        }

        .search-box {
            position: relative;
            width: 100%;
            max-width: 280px;
        }

        .search-input {
            padding: 8px 16px 8px 36px;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            font-size: 0.875rem;
            width: 100%;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

            .search-input:focus {
                outline: none;
                border-color: #1e40af;
                box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.2);
            }

        .search-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
        }

        /* 树形结构样式 */
        .tree-container {
            overflow: auto;
            flex-grow: 1;
            padding-right: 8px;
        }

        .tree-root {
            padding-left: 0;
        }

        .tree-item {
            margin-bottom: 8px;
        }

        .process-card {
            background-color: white;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            padding: 12px;
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: background-color 0.2s, border-color 0.2s;
        }

            .process-card:hover {
                background-color: #f9fafb;
                border-color: #1e40af;
            }

            .process-card.active {
                background-color: #eff6ff;
                border-color: #1e40af;
            }

        .indent-container {
            display: flex;
            align-items: center;
        }

        .indent {
            width: 24px;
            height: 24px;
            position: relative;
        }

        .indent-line {
            position: absolute;
            left: 12px;
            top: 0;
            bottom: 0;
            width: 1px;
            background-color: #e5e7eb;
        }

        .toggle-btn {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .toggle-icon {
            color: #6b7280;
            transition: transform 0.2s;
        }

            .toggle-icon.open {
                transform: rotate(90deg);
            }

        .process-icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 8px;
            color: #1e40af;
        }

        .process-name {
            flex-grow: 1;
            font-weight: 500;
        }

        .process-id {
            font-size: 0.75rem;
            color: #6b7280;
            background-color: #f3f4f6;
            padding: 4px 8px;
            border-radius: 4px;
        }

        .tree-children {
            padding-left: 24px;
            margin-top: 4px;
            display: none;
        }

            .tree-children.show {
                display: block;
            }

        /* 搜索结果高亮 */
        .highlight {
            background-color: #fef3c7;
            padding: 0 2px;
            border-radius: 2px;
        }

        /* 隐藏类 */
        .hidden {
            display: none !important;
        }

        /* 无结果提示 */
        .no-results {
            text-align: center;
            padding: 32px;
            color: #6b7280;
        }

        .no-results-icon {
            font-size: 2.5rem;
            margin-bottom: 8px;
            color: #d1d5db;
        }

        /* 响应式设计 */
        @@media (max-width: 1200px) {
            .tree-section

        {
            flex: 2;
        }

        .detail-section {
            flex: 3;
        }

        }

        @@media (max-width: 992px) {
            .content-wrapper

        {
            flex-direction: column;
            height: auto;
        }

        .tree-section, .detail-section {
            flex: none;
            height: auto;
            max-width: none;
            min-width: 0;
            margin-bottom: 16px;
        }

        }

        @@media (max-width: 768px) {
            .search-container

        {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }

        .search-box {
            max-width: none;
        }

        }

        /* 加载提示样式 */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            flex-direction: column;
        }

        .loading-spinner {
            border: 4px solid rgba(0, 0, 0, 0.1);
            border-left-color: #1e40af;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin-bottom: 16px;
        }

        @@keyframes spin {
            0%

        {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }

        }

        .loading-text {
            color: #1e40af;
            font-weight: 500;
        }

        /* 数据获取状态提示 */
        .api-status {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 12px 20px;
            border-radius: 4px;
            background-color: #1f2937;
            color: white;
            font-size: 0.875rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            z-index: 9998;
            display: none;
        }

            .api-status.success {
                background-color: #10b981;
            }

            .api-status.error {
                background-color: #ef4444;
            }
    </style>
</head>
<body>
    <!-- 加载提示 -->
    <div id="loading-overlay" class="loading-overlay">
        <div class="loading-spinner"></div>
        <div class="loading-text">正在加载数据...</div>
    </div>

    <!-- API状态提示 -->
    <div id="api-status" class="api-status">数据加载成功</div>

    <div class="min-h-screen flex flex-col">
        <!-- 顶部导航栏 -->
        <header>
            <div class="container header-content">
                <div class="header-actions toolbar">
                    <a class="btn btn-secondary" id="btnAdd">
                        新增工序
                    </a>
                    <button class="btn btn-primary" id="refresh-btn">
                        刷新
                    </button>
                </div>
            </div>
        </header>

        <!-- 主要内容区域 -->
        <main>
            <div class="container">
                <div class="content-wrapper">
                    <!-- 左侧树形结构区域 -->
                    <div class="tree-section">
                        <div class="page-title">
                            <h2>工序树形结构</h2>
                            <p>展示所有工序及其子工序的层级关系</p>
                        </div>

                        <div class="card">
                            <div class="search-container">
                                <div class="process-count">
                                    共 <span id="process-count" class="font-semibold">0</span> 个工序
                                </div>
                                <div class="search-box">
                                    <span class="search-icon">
                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M21 21L16.65 16.65" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                    </span>
                                    <input type="text" id="search-input" placeholder="搜索工序名称..." class="search-input">
                                </div>
                            </div>

                            <!-- 树形结构容器 -->
                            <div id="tree-container" class="tree-container">
                                <div class="tree-root">
                                    <!-- 树形结构将通过JavaScript动态生成 -->
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 右侧详情区域 -->
                    <div class="detail-section">
                        <div class="page-title">
                            <h2>工序详情</h2>
                            <p>查看选中工序的详细信息</p>
                        </div>

                        <div class="detail-card">
                            <div class="detail-header">
                                <h3 id="detail-title">请选择工序</h3>
                                <p id="detail-subtitle">从左侧树形结构中选择一个工序查看详情</p>
                            </div>

                            <div class="detail-content">
                                <!-- 空状态 -->
                                <div id="detail-empty" class="detail-empty">
                                    <div class="detail-empty-icon">
                                        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M12 16V12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M12 8H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                    </div>
                                    <p>请从左侧选择一个工序以查看详细信息</p>
                                </div>

                                <!-- 详情表单 -->
                                <div id="detail-form" class="detail-form">
                                    <div class="form-group">
                                        <label class="form-label">工序ID</label>
                                        <div id="detail-id" class="form-value"></div>
                                    </div>

                                    <div class="form-group">
                                        <label class="form-label">工序名称</label>
                                        <div id="detail-name" class="form-value"></div>
                                    </div>

                                    <div class="form-group">
                                        <label class="form-label">部门备注</label>
                                        <div id="detail-department" class="form-value"></div>
                                    </div>

                                    <div class="form-group">
                                        <label class="form-label">用户ID</label>
                                        <div id="detail-userid" class="form-value"></div>
                                    </div>

                                    <div class="form-group">
                                        <label class="form-label">子工序数量</label>
                                        <div id="detail-children" class="form-value"></div>
                                    </div>

                                    <!-- 添加更多空白区域以填充剩余空间 -->
                                    <div class="flex-grow"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script>
        // 工序数据
        let processes = [];

        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', async function() {
            // 显示加载提示
            document.getElementById('loading-overlay').style.display = 'flex';

            // 请求API获取实际数据
            await fetchProcessData();

            // 绑定搜索事件
            document.getElementById('search-input').addEventListener('input', function(e) {
                searchProcesses(e.target.value);
            });

            // 绑定刷新按钮事件
            document.getElementById('refresh-btn').addEventListener('click', function() {
                // 显示加载提示
                document.getElementById('loading-overlay').style.display = 'flex';

                // 刷新效果
                const treeContainer = document.getElementById('tree-container');
                treeContainer.style.opacity = '0.5';

                // 重新请求数据
                fetchProcessData();

                setTimeout(() => {
                    treeContainer.style.opacity = '1';
                }, 500);
            });

            // 绑定新增工序按钮事件
            document.getElementById('btnAdd').addEventListener('click', function() {
                ys.openDialog({
                    title: "新增工序",
                    content: '@Url.Content("~/PMCManage/Process/ProcessAdd")' + '?id=' + 0
            });
        });
        });

        // 请求API获取工序数据
        async function fetchProcessData() {
            try {
                const apiUrl = '/PMCManage/Process/GetListJson';
                const formData = new URLSearchParams();
                formData.append('IsTree', 'true');

                const response = await fetch(apiUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: formData
                });

                if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
                const data = await response.json();
                processes = data.Data;

                // 清空现有树形结构
                const treeRoot = document.querySelector('.tree-root');
                treeRoot.innerHTML = '';

                // 重新渲染树形结构
                renderTree(processes, treeRoot);

                // 更新工序总数
                document.getElementById('process-count').textContent = countAllProcesses(processes);

                showApiStatus('数据加载成功', 'success');
            } catch (error) {
                showApiStatus('数据加载失败', 'error');
                console.error('数据加载失败:', error);
            } finally {
                document.getElementById('loading-overlay').style.display = 'none';
            }
        }

        // 显示API状态提示
        function showApiStatus(message, type = 'success') {
            const statusElement = document.getElementById('api-status');
            statusElement.textContent = message;
            statusElement.className = 'api-status ' + type;
            statusElement.style.display = 'block';

            // 3秒后自动隐藏
            setTimeout(() => {
                statusElement.style.display = 'none';
            }, 3000);
        }

        // 渲染树形结构
        function renderTree(nodes, container, level = 0) {
            nodes.forEach((node, _index) => {
                // 创建工序项
                const processItem = document.createElement('div');
                processItem.className = 'tree-item';
                processItem.dataset.id = node.Id;
                processItem.dataset.name = node.Name;
                processItem.dataset.department = node.DepartmentRemark;
                processItem.dataset.userid = node.UserId;

                // 创建工序内容
                const processContent = document.createElement('div');
                processContent.className = 'process-card';

                // 创建缩进容器
                const indentContainer = document.createElement('div');
                indentContainer.className = 'indent-container';

                // 添加缩进
                for (let i = 0; i < level; i++) {
                    const indent = document.createElement('div');
                    indent.className = 'indent';

                    // 添加竖线
                    if (i < level - 1) {
                        const line = document.createElement('div');
                        line.className = 'indent-line';
                        indent.appendChild(line);
                    }

                    indentContainer.appendChild(indent);
                }

                // 添加展开/折叠按钮
                const toggleBtn = document.createElement('div');
                toggleBtn.className = 'toggle-btn';

                if (node.Children && node.Children.length > 0) {
                    const toggleIcon = document.createElement('div');
                    toggleIcon.className = 'toggle-icon';
                    toggleIcon.innerHTML = `
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9 5L17 12L9 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    `;
                    toggleBtn.appendChild(toggleIcon);

                    // 绑定点击事件
                    toggleBtn.addEventListener('click', function(e) {
                        e.stopPropagation();
                        toggleChildren(processItem, toggleIcon);
                    });
                }

                indentContainer.appendChild(toggleBtn);

                // 添加工序图标
                const icon = document.createElement('div');
                icon.className = 'process-icon';
                icon.innerHTML = `
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M19 11H5C3.89543 11 3 10.1046 3 9V4C3 2.89543 3.89543 2 5 2H19C20.1046 2 21 2.89543 21 4V9C21 10.1046 20.1046 11 19 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M7 22V13H17V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M7 13L5 15L7 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M17 13L19 15L17 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                `;

                // 添加工序名称
                const name = document.createElement('div');
                name.className = 'process-name';
                name.textContent = node.Name;

                // 添加工序ID
                const id = document.createElement('div');
                id.className = 'process-id';
                id.textContent = `ID: ${node.Id}`;

                // 组装工序内容
                processContent.appendChild(indentContainer);
                processContent.appendChild(icon);
                processContent.appendChild(name);
                processContent.appendChild(id);

                // 绑定点击事件
                processContent.addEventListener('click', function() {
                    showProcessDetails(node);
                });

                // 添加到工序项
                processItem.appendChild(processContent);

                // 如果有子工序，创建子工序容器
                if (node.Children && node.Children.length > 0) {
                    const childrenContainer = document.createElement('div');
                    childrenContainer.className = 'tree-children';
                    processItem.appendChild(childrenContainer);

                    // 递归渲染子工序
                    renderTree(node.Children, childrenContainer, level + 1);
                }

                // 添加到容器
                container.appendChild(processItem);
            });
        }

        // 展开/折叠子工序
        function toggleChildren(processItem, toggleIcon) {
            const childrenContainer = processItem.querySelector('.tree-children');

            if (childrenContainer) {
                if (childrenContainer.classList.contains('show')) {
                    childrenContainer.classList.remove('show');
                    toggleIcon.classList.remove('open');
                } else {
                    childrenContainer.classList.add('show');
                    toggleIcon.classList.add('open');
                }
            }
        }

        // 显示工序详情
        function showProcessDetails(process) {
            // 高亮选中的工序
            document.querySelectorAll('.process-card').forEach(card => {
                card.classList.remove('active');
            });

            const selectedCard = document.querySelector(`.tree-item[data-id="${process.Id}"] .process-card`);
            if (selectedCard) {
                selectedCard.classList.add('active');
            }

            // 显示详情表单，隐藏空状态
            document.getElementById('detail-empty').style.display = 'none';
            document.getElementById('detail-form').style.display = 'flex';

            // 更新详情标题
            document.getElementById('detail-title').textContent = process.Name;
            document.getElementById('detail-subtitle').textContent = `工序详情 #${process.Id}`;

            // 更新详情内容
            document.getElementById('detail-id').textContent = process.Id;
            document.getElementById('detail-name').textContent = process.Name;
            document.getElementById('detail-department').textContent = process.DepartmentRemark || '无';
            document.getElementById('detail-userid').textContent = process.UserId || '无';

            // 计算子工序数量
            const childrenCount = countAllProcesses(process.Children || []);
            document.getElementById('detail-children').textContent = childrenCount;
        }

        // 计算所有工序数量
        function countAllProcesses(nodes) {
            let count = nodes.length;

            nodes.forEach(node => {
                if (node.Children && node.Children.length > 0) {
                    count += countAllProcesses(node.Children);
                }
            });

            return count;
        }

        // 搜索工序 - 支持多个根节点，只匹配名称
        function searchProcesses(keyword) {
            if (!keyword) {
                // 如果搜索关键词为空，显示所有工序
                document.querySelectorAll('.tree-item').forEach(item => {
                    item.classList.remove('hidden');
                });

                // 移除无结果提示
                const noResultsElement = document.getElementById('no-results');
                if (noResultsElement) {
                    noResultsElement.remove();
                }

                // 重置高亮
                document.querySelectorAll('.process-name').forEach(el => {
                    el.innerHTML = el.textContent;
                });

                return;
            }

            keyword = keyword.toLowerCase();
            let hasResults = false;

            // 重置所有节点显示状态
            document.querySelectorAll('.tree-item').forEach(item => {
                item.classList.add('hidden');
            });

            // 递归搜索节点及其子节点
            function searchNode(node, element) {
                const nodeName = node.Name.toLowerCase();

                // 只匹配名称
                const isMatch = nodeName.includes(keyword);

                // 检查子节点是否有匹配
                let hasMatchingChild = false;
                if (node.Children && node.Children.length > 0) {
                    const childrenContainer = element.querySelector('.tree-children');
                    if (childrenContainer) {
                        const childElements = childrenContainer.querySelectorAll('.tree-item');
                        node.Children.forEach((child, index) => {
                            if (index < childElements.length) {
                                const childHasMatch = searchNode(child, childElements[index]);
                                hasMatchingChild = hasMatchingChild || childHasMatch;
                            }
                        });
                    }
                }

                // 如果当前节点或子节点匹配，显示该节点
                if (isMatch || hasMatchingChild) {
                    element.classList.remove('hidden');

                    // 展开所有父节点以确保匹配的节点可见
                    let parent = element.parentElement;
                    while (parent && !parent.classList.contains('tree-root')) {
                        if (parent.classList.contains('tree-children')) {
                            const parentItem = parent.parentElement;
                            if (parentItem && parentItem.classList.contains('tree-item')) {
                                parentItem.classList.remove('hidden');
                                // 展开父节点的子节点容器
                                parent.classList.add('show');
                                // 确保父节点的切换图标处于打开状态
                                const toggleIcon = parentItem.querySelector('.toggle-icon');
                                if (toggleIcon) {
                                    toggleIcon.classList.add('open');
                                }
                            }
                        }
                        parent = parent.parentElement;
                    }

                    // 高亮匹配的文本
                    if (isMatch) {
                        const nameElement = element.querySelector('.process-name');
                        if (nameElement) {
                            const regex = new RegExp(keyword, 'gi');
                            const highlightedText = node.Name.replace(
                                regex,
                                match => `<span class="highlight">${match}</span>`
                            );
                            nameElement.innerHTML = highlightedText;
                        }
                    }

                    hasResults = true;
                    return true;
                } else {
                    element.classList.add('hidden');
                    return false;
                }
            }

            // 重置高亮
            document.querySelectorAll('.process-name').forEach(el => {
                el.innerHTML = el.textContent;
            });

            // 对每个根节点进行搜索
            const rootElements = document.querySelectorAll('.tree-root > .tree-item');
            processes.forEach((process, index) => {
                if (index < rootElements.length) {
                    searchNode(process, rootElements[index]);
                }
            });

            // 处理无结果的情况
            const treeRoot = document.querySelector('.tree-root');
            let noResultsElement = document.getElementById('no-results');

            if (!hasResults) {
                if (!noResultsElement) {
                    noResultsElement = document.createElement('div');
                    noResultsElement.id = 'no-results';
                    noResultsElement.className = 'no-results';
                    noResultsElement.innerHTML = `
                        <div class="no-results-icon">
                            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <p>未找到匹配的工序</p>
                    `;
                    treeRoot.appendChild(noResultsElement);
                }
                noResultsElement.style.display = 'block';
            } else if (noResultsElement) {
                noResultsElement.style.display = 'none';
            }
        }
    </script>
</body>
</html>